<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search v-model="value" show-action placeholder="搜索" @search="onSearch" @cancel="onCancel" />
    <!-- 历史记录 -->
    <section class="sea_history bgfff">
      <div class="flex justify-between">
        <p class="tit">搜索历史</p>
        <img class="del" src="@/assets/img/del.png" alt @click="onSearchDel()" />
      </div>
      <dl class="list" v-show="searchList.length != 0 && token">
        <dd
          v-for="(item, index) in searchList.slice(0, 10)"
          :key="index"
          @click="onSearchHistory(item.search_title)"
        >{{ item.search_title }}</dd>
        <!-- <dd @click="onShowMore">
          <van-icon name="arrow-down" v-if="isShowMore" />
          <van-icon name="arrow-up" v-if="!isShowMore" />
        </dd>-->
      </dl>
      <!-- 16 v-show="isShowMore ? index < 8 : index >= 0" -->
      <!-- 30 v-if="history.length > 8" -->
      <!-- 本地搜索记录 -->
      <dl class="list" v-if="history && !token">
        <dd
          v-for="(item, index) in history.slice(0, 10)"
          :key="index"
          @click="onSearchHistory(item.search_title)"
        >{{ item.search_title }}</dd>
        <!-- <dd @click="onShowMore">
          <van-icon name="arrow-down" v-if="isShowMore" />
          <van-icon name="arrow-up" v-if="!isShowMore" />
        </dd>-->
      </dl>
      <van-empty image="search" description="暂无数据" v-if="searchList.length == 0 && token" />
      <van-empty image="search" description="暂无数据" v-if="history.length == 0 && !token" />
    </section>
    <!-- 为你推荐 -->
    <section class="sea_recommend bgfff margin-t20" v-if="ad1.length > 0">
      <p class="tit">{{ad1_title}}</p>
      <ul class="list">
        <li
          class="text-cut-one"
          v-for="(item, index) in ad1"
          :key="index"
          @click="onSearchHistory(item.title)"
        >{{item.title}}</li>
      </ul>
    </section>
    <!-- 热门推荐 -->
    <section class="hot bgfff margin-top-15" v-if="ad2.length > 0">
      <div class="hot_title">
        <span class="c-ff0">{{ad2_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">HOT</span>
      </div>
      <div class="hot_ul text-center flex flex-wrap">
        <div class="hot_li" v-for="(item, index) in ad2" :key="index" @click="http(item.url)">
          <div class="hot_li_img">
            <img :src="item.thumb" alt />
          </div>
          <div class="text-cut-one">{{item.title}}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isShowMore: true,
      searchList: [],
      ad1: [],
      ad1_title: "",
      ad2: [],
      ad2_title: "",
      ad_title: "",
      history: [],
      token: ""
    };
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    if (!window.localStorage.getItem("history")) {
      window.localStorage.history = JSON.stringify([]);
    }
    this.getAd(36, 10, 0, this.ad1, "ad1_title"); // 大家都在搜
    this.getAd(6, 8, 0, this.ad2, "ad2_title"); // 检索推荐
    this.getSearch();
  },
  methods: {
    // 搜索
    onSearch() {
      if (!this.value) {
        this.$toast("请输入内容");
        return false;
      }
      if (!window.localStorage.getItem("token")) {
        let history = JSON.parse(window.localStorage.getItem("history")) || [];
        for (let i in history) {
          if (this.value == history[i].search_title) {
            this.history = history;
            window.localStorage.setItem("history", JSON.stringify(history));
            this.$router.push({
              path: "/search/searchData",
              query: {
                value: this.value
              }
            });
            return false;
          }
        }
        history.unshift({
          search_title: this.value
        });
        this.history = history;
        window.localStorage.setItem("history", JSON.stringify(history));
      }
      this.$router.push({
        path: "/search/searchData",
        query: {
          value: this.value
        }
      });
    },
    // 取消
    onCancel() {
      this.$router.go(-1);
    },
    // 历史搜索
    onSearchHistory(val) {
      this.$router.push({
        path: "/search/searchData",
        query: {
          value: val
        }
      });
    },
    // 切换展示更多
    onShowMore() {
      this.isShowMore = !this.isShowMore;
    },
    // 清除搜索记录
    onSearchDel() {
      if (!window.localStorage.getItem("token")) {
        this.history = [];
        window.localStorage.history = JSON.stringify([]);
        return false;
      }
      this.$axios
        .post("/wap/index/searchDel", {
          token: window.localStorage.getItem("token")
        })
        .then(res => {
          if (res.data.code == 0) {
            this.searchList = [];
            this.$toast(res.data.msg);
          }
        });
    },
    // 获取搜索记录
    getSearch() {
      if (!window.localStorage.getItem("token")) {
        this.history = JSON.parse(window.localStorage.getItem("history"));
        return false;
      }
      this.$axios
        .post("/wap/index/search", {
          token: window.localStorage.getItem("token")
        })
        .then(res => {
          for (let i in res.data.data) {
            this.searchList.push(res.data.data[i]);
          }
        });
    },
    // 广告位
    getAd(id, li, rd, name, title) {
      this.$axios
        .post("/wap/ad/getAd", {
          category_id: id,
          limit: li,
          is_recommend: rd
        })
        .then(res => {
          this[title] = res.data.category_name;
          for (let i in res.data.data) {
            name.push(res.data.data[i]);
          }
        });
    },
    // 跳转
    to(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    http(path) {
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style scoped>
.bgfff {
  background-color: #fff;
  padding: 0.3rem 0.2rem;
}
/* 历史记录 */
.sea_history {
  border-top: 1px solid #ededed;
}
.sea_history .tit {
  font-size: 0.28rem;
  color: #999999;
}
.sea_history .del {
  display: block;
  width: 0.29rem;
  height: 0.27rem;
}
.sea_history .list {
  padding: 0.3rem 0 0 0;
  position: relative;
}
.sea_history .list dd:nth-child(1) {
  font-size: 0.28rem;
  color: #333333;
  border-bottom: 1px solid #ededed;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  word-break: break-all;
}
.sea_history .list dd:not(:nth-child(1)) {
  display: inline-block;
  padding: 0.5em 0.7em;
  font-size: 0.26rem;
  color: #656565;
  margin: 0 1em 1em 0;
  background: #f3f3f3;
  border-radius: 4px;
  word-break: break-all;
}
/* 为你推荐 */
.sea_recommend .tit {
  font-size: 0.3rem;
  color: #333333;
  font-weight: bold;
  margin-bottom: 0.4em;
}
.sea_recommend .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.sea_recommend .list li {
  flex: 0 1 50%;
  font-size: 0.28rem;
  padding-right: 1em;
  margin-top: 0.5em;
  line-height: 1.5em;
  height: 1.5em;
}
/* 热门推荐 */
.hot {
  padding: 0 0.2rem 0.2rem 0.2rem;
}
.hot_title {
  font-size: 0.32rem;
  height: 1rem;
  line-height: 1rem;
}
.hot_ul {
  border-top: 1px solid #f4f4f4;
}
.hot_li {
  width: 25%;
  padding: 0.2rem;
  font-size: 0.24rem;
  line-height: 1.6;
  color: #666;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}
.hot_li:nth-of-type(n + 5) {
  border-bottom: transparent solid #f4f4f4;
}
.hot_li:nth-of-type(4n) {
  border-right: 0;
}
.hot_li_img {
  height: 0.86rem;
}
.hot_li img {
  max-width: 1rem;
  max-height: 0.74rem;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>


<style>
.search .van-empty__image {
  height: 40px;
}
</style>